<template>
	<div id="deFooter" class="de-footer">
		<div class="btn_list_wrap">
			<div class="btn_list" v-for="(item, index) in btnData" :key="index" @click="jumpMenuFn(item)" v-show="item.judge()">
				<div class="btn_blo active" v-if="index == activeIndex">
					<div>
						<img class="btn_img" :src="constant.imgUrl + item.activeImg" alt mode="widthFix" />
					</div>
					<div class="btn_text">{{ item.text }}</div>
					<!-- <img class="btn_img" :src="constant.imgUrl + item.activeImg" alt mode="widthFix" /> -->
				</div>
				<div class="btn_blo" v-else>
					<div>
						<img class="btn_img" :src="constant.imgUrl + item.img" alt mode="widthFix" />
					</div>
					<div class="btn_text">{{ item.text }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { jumpShop } from '@/utils/common'
import { getUser } from '@/utils/auth'
export default {
	name: 'Defooter',
	components: {},
	data() {
		return {
			constant: this.$constant,
			// activeIndex: 0,
			btnData: [
				{
					text: '推广素材',
					url: '/pages/getGuest/shareIndex',
					img: 'common/share_no.png',
					activeImg: 'common/share_is.png',
					judge: () => true
				},
				{
					text: '获客工具',
					url: '/pages/getGuest/index',
					img: 'common/tool_no.png',
					activeImg: 'common/tool_is.png',
					judge: () => true
				},
				{
					text: '家居商城',
					url: '/home',
					img: 'common/mall_no.png',
					activeImg: '',
					type: 2,
					judge: () => {
						// return true
						let status = this.userInfo ? this.userInfo.role_id != 2 : false
						return status && this.$util.shieldReview()
					}
				},
				{
					text: '我的客户',
					url: '/pages/order/subscribeOrder',
					img: 'common/member_no.png',
					activeImg: 'common/member_is.png',
					judge: () => true
				},
				{
					text: '管理中心',
					url: '/pages/admin/index',
					img: 'common/center_no.png',
					activeImg: 'common/center_is.png',
					judge: () => true
				}
			]
		}
	},
	props: {
		activeIndex: {
			type: Number,
			default: 0
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	mounted() {
		getUser().then(res => {
			if (this.userInfo.role_id == 2) {
				this.btnData[0] = {
					text: '我的网店',
					url: '/pages/design/material/index',
					img: 'common/shop_no.png',
					activeImg: 'common/shop_is.png',
					judge: () => true
				}

				this.btnData[3].url = '/pages/material/manage/management'
			}
		})
		// const pages = getCurrentPages()
		// console.log(pages[pages.length - 1].route, '页面栈1')
		// const name = pages[pages.length - 1].route
		// if (name == 'pages/order/subscribeOrder') {
		//     this.activeIndex = 2
		// } else if (name == 'pages/admin/index') {
		//     this.activeIndex = 3
		// } else {
		//     this.activeIndex = 0
		// }
	},
	methods: {
		/**
			 * 功能按钮跳转相应的页面
			 * @parmas item.type 1 为自身的跳转，2为商城的跳转, 3为商城带id的跳转
			 */
		jumpMenuFn(item) {
			if (item.funtion) {
				item.funtion()
				return false
			}
			if (item.type == 2) {
				if (this.constant.oemSource == 3) {
					let urlEndStr = `&token=${uni.getStorageSync('token')}&type=hkds_miniapp&open_silver_card=1&mobile=${this.userInfo.mobile_phone}`
					// let urlEndStr = `&open_silver_card=1&mobile=${this.userInfo.mobile_phone}`
					jumpShop(item.url, this.userInfo.user_picture, '', urlEndStr)
				} else {
					console.info('this.constant', this.constant)
					uni.navigateToMiniProgram({
						appId: 'wx8f7fb117e1587667',
						extraData: this.constant
					})
				}
				return false
			}
			if (item.type == 3) {
				jumpShop(item.url + this.userInfo.user_id, this.userInfo.user_picture)
				return false
			}
			console.log(item)
			if (item.url) {
				let query = query ? this.$util.parse(item.query) : ''
				uni.reLaunch({
					url: `${item.url}?owner_user_id=${this.userInfo.user_id}`
				})
			}
		}
	}
}
</script>

<style lang="scss">

</style>
<style scoped lang="scss">
	.de-footer {
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		line-height: 1;
		.btn_list_wrap {
			width: 100%;
			@include direction(center, space-around);
			.btn_list {
				width: 30%;
			}
			.btn_blo {
				color: $fontColor3;
				.btn_img {
					width: 40px !important;
					height: auto;
				}
				.btn_text {
					transform: scale(0.8);
					margin-top: 8px;
				}
			}
			.active {
				.btn_text {
					color: #ffac1b;
				}
				// .btn_img {
				//     width: 80px !important;
				// }
			}
		}
	}
</style>
